<template>
  <!-- 确认，选择DPIA，创建问卷 submitCreate-->
  <a-modal :visible="visible" @ok="submit" @cancel="close" :ok-text="$t('user.verification-code.required1166')"
    :cancel-text="$t('user.email.required11')" width="400px">
    <a-space>
      <div class="tags"></div>{{ $t('user.verification-code.required1100') }}
    </a-space>
    <a-form layout="inline" class="mt-[15px]" :form="form1">
      <!-- 关联的RPA名称 -->
      <a-form-item :label="$t('user.verification-code.required11156611027')">
        <a-input :placeholder="$t('user.verification-code.required1115661102711')"
          style="width: 300px;margin-right: 30px; margin-left: 13px;" disabled
          v-decorator="['DpiaRpaId', { rules: [{ required: true, message: $t('user.verification-code.required111566110577315') }] }]"></a-input>
      </a-form-item>
      <!-- DPIA模板 -->
      <a-form-item :label="$t('user.verification-code.required11156611028')">
        <a-select :placeholder="$t('user.verification-code.required1115661102811')"
          style="width: 309px;margin-right: 30px; margin-left: 5px;" class="pl-[8px]" option-filter-prop="children"
          :filter-option="filterOption" show-search
          v-decorator="['DpiaModelId', { rules: [{ required: true, message: $t('user.verification-code.required111566110577316') }] }]">
          <a-select-option v-for="items in dpiaSelectListsData" :value="items.value" :key="items.value">{{
            items.label
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <!-- DPIA的名称 -->
      <a-form-item :label="$t('menu.account.logout1122992277994544543265')">
        <a-input
          v-decorator="['DpiaName', { rules: [{ required: true, message: $t('menu.account.logout1122992277994544543265444') }] }]"
          :placeholder="$t('menu.account.logout1122992277994544543265444')"
          style="width: 300px;margin-right: 30px; margin-left: 13px;"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { dpiaQuestionsCreate } from '@/api/dpia/form'

export default {
  props: ['dpiaSelectListsData', 'rpaId'],
  data() {
    return {
      // 下面这些都是通用的
      form: this.$form.createForm(this),
      visible: false,
      loading: false,
      mode: 0
    }
  },
  mounted() { },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    /**
     *
     * @param {*} type 0 新增 1 修改
     * @param {*} data 列表传过来的值
     */
    async open(mode = 0, data = {}) {
      this.mode = mode
      this.visible = true
      await this.$nextTick()
      // 如果是修改
      if (mode == 1) {
        //修改的时候需要给form赋值 
        this.form.setFieldsValue({
          ConfigurationItemsContent: data.ConfigurationItemsContent,
          Id: data.Id,
        })
      } else {
        this.form.setFieldsValue({
          ConfigurationItemsState: 3
        })
      }
    },
    // 提交 通用的
    submit() {
      const {
        form1: { validateFields },
      } = this
      // 按钮loading
      this.loading = true
      // validateFields 是校验form表单数据 
      // force: true 是默认所有字段都校验
      // values 表单的值 
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          console.log("[rpa.newdpia]原始RPAID: ", this.rpaId)
          console.log("[rpa.newdpia]请求内容: ", values)
          try {
            const params = { ...values }
            const { data } = await dpiaQuestionsCreate({
              DpiaRpaId: this.rpaId,
              DpiaModelId: params.DpiaModelId,
              DpiaName: params.DpiaName
            })
            this.$message.success(this.$t('user.verification-code.required111566110577326'))
            this.createQuestionStatus = false;
            this.$router.push({ path: '/dpia/question', query: { id: data.Id } })
          } catch (error) {
            this.$message.error(error)
          } finally {
            this.loading = false
          }
        } else {
          setTimeout(() => {
            this.loading = false
          }, 600)
        }
      })


      // const {
      //   form: { validateFields },
      // } = this
      // // 按钮loading
      // this.loading = true
      // // validateFields 是校验form表单数据 
      // // force: true 是默认所有字段都校验
      // // values 表单的值 
      // validateFields({ force: true }, async (err, values) => {
      //   if (!err) {
      //     try {
      //       const params = { ...values }
      //       await configurationCreateUpdate({ ...params })
      //       // 如果成功就调用父页面当前组件的succeed上绑定的事件
      //       this.$emit('succeed')
      //       this.$message.success('操作成功！')
      //       //如果成功就关闭
      //       this.close()
      //     } catch (error) {
      //       this.$message.error(error)
      //     } finally {
      //       this.loading = false
      //     }
      //   } else {
      //     setTimeout(() => {
      //       this.loading = false
      //     }, 600)
      //   }
      // })
    },
    // 关闭 通用的 
    close() {
      // 修改侧边栏状态
      this.visible = false
      // 清空form的值
      this.form.resetFields()
    },
  },
}
</script>
